{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="/Public/Css/front/front_css/system_set.css">
<style type="text/css">
	html,body{
		background-color: #f3f3f3;
		width: 100%;
		height: 100%;
		margin:0;
		padding: 0;
		overflow: hidden;
	}
	input{
		width: 140%;
		height: 2.5rem;
		color:transparent;
		position: absolute;
		top:7.55rem;
		left:4.665%;
		margin-left: -50%;
	}
	.input1{
		width: 15%;
		height: 2.5rem;
		border: 0.05rem solid #efefef;
		position: absolute;
		top:7.55rem;
		left:4.665%;
		background-color: #fff;
		border-right: 0;
		line-height: 2.5rem;
		font-size: 2rem;
		color: #000;
		text-align: center;
	}
	.input2{
		width: 15%;
		height: 2.5rem;
		border: 0.05rem solid #efefef;
		position: absolute;
		top:7.55rem;
		left:19.665%;
		background-color: #fff;
		border-right: 0;
	}
	.input2{
		width: 15%;
		height: 2.5rem;
		border: 0.05rem solid #efefef;
		position: absolute;
		top:7.55rem;
		left:19.665%;
		background-color: #fff;
		border-right: 0;
	}
	.input3{
		width: 15%;
		height: 2.5rem;
		border: 0.05rem solid #efefef;
		position: absolute;
		top:7.55rem;
		left:34.665%;
		background-color: #fff;
		border-right: 0;
	}
	.input4{
		width: 15%;
		height: 2.5rem;
		border: 0.05rem solid #efefef;
		position: absolute;
		top:7.55rem;
		left:49.665%;
		background-color: #fff;
		border-right: 0;
	}
	.input5{
		width: 15%;
		height: 2.5rem;
		border: 0.05rem solid #efefef;
		position: absolute;
		top:7.55rem;
		left:64.665%;
		background-color: #fff;
		border-right: 0;
	}
	.input6{
		width: 15%;
		height: 2.5rem;
		border: 0.05rem solid #efefef;
		position: absolute;
		top:7.55rem;
		left:79.665%;
		background-color: #fff;
		border-right: 0;
	}
	.point{
		width: 0.4rem;
		height: .4rem;
		border-radius: 50%;
		display: inline-block;
		background-color: #000;
		position: absolute;
		top:1.15rem;
		left:44%;
		display: none;
	}
	.defeat{
	background-image: url(/Public/Images/front/front_img/icon-cuowu@3x.png);
	background-size: 2.2rem 2.2rem;
	width: 2.2rem;
	height: 2.2rem;
	position: absolute;
	display: block;
	top:1.0rem;
	left:30.7%;
}
.Popupdefeat
{
	width: 30.4%;
	height: 5.7rem;
	opacity: 0.8;
	background: #000000;
	border-radius: 0.5rem;
	display: none;
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin:auto;
	z-index: 99;
}
.Popupdefeat p{
	width: 100%
	height:0.8rem;
	font-size: 0.5rem;
	color: #FFFFFF;
	letter-spacing: 0;
	display: block;
	position: absolute;
	text-align: center;
	top:4.0rem;
	left:18%;

}
</style>
{/block}
{block name="content"}

<div style="height:100%">
	<div class="title" style="height:6.75%;">
		<div class="go_back"></div>
		<p><strong>{$head_title}</strong></p>
		{if !$is_mobile_pw}
			{if $is_pw}<a class="forget native_go" href="/FrontUserCenter/forget_pay_psw">忘记密码</a>{/if}
		{/if}

	</div>

	<div class="input_area">
	<span class="psw_set">
		{if !$is_mobile_pw}
			{if $is_pw}请输入原支付密码，完成身份验证{else}请设置支付密码{/if}
		{else}
			请设置支付密码
		{/if}
	</span>
	<span class="input1 inpnew" ><span class="point"></span></span>
	<span class="input2 inpnew" ><span class="point"></span> </span>
	<span class="input3 inpnew" ><span class="point"></span> </span>
	<span class="input4 inpnew" ><span class="point"></span> </span>
	<span class="input5 inpnew" ><span class="point"></span> </span>
	<span class="input6 inpnew" ><span class="point"></span> </span>
	<input type="tel" class="real" id="psw_input" maxlength="6"  style= "background-color:transparent">

	</div>

	<!--支付密码设置成功-->
	<div class="set_success" style="display:none;height:93.25%;">
		<img src="/Public/Images/front/front_img/icon_setkey_key@3x.png" class="setok">
		<span class="p1">设置成功</span>
		<p>请牢记此密码，钱包支付时用此支付密码哦</p>
	</div>


</div>


<!--<div class="Popupsuccess">-->
	<!--<i class="done"></i>-->
	<!--<p>领取成功</p>-->
<!--</div>-->

<div class="Popupdefeat">
	<div class="defeat"></div>
	<p>原密码输入错误</p>
</div>

{/block}
{block name="js"}
<script>
	var is_pwd = parseInt('{$is_pw}')
	var url = '';
	var pwd = 0;
	var is_mobile_pw = parseInt('{$is_mobile_pw}');//是否通过手机找回密码
	var status = is_pwd ? 0 : 1;
	if(is_mobile_pw){ //是的话直接进入设置新密码．
		status = 1;
	}
</script>
{literal}
<script type="text/javascript">



$('#psw_input').on('input',function(){
	var length = $('#psw_input').val().length;
	pwd = $('#psw_input').val();
	console.log(length);
	for(var i=0;i<length;i++){
		$("span.inpnew").eq(i).find(".point").show();
	}
	for(var j=length;j<6;j++){
		$("span.inpnew").eq(j).find(".point").hide();
	}

	//如果六位输满，则自动提交
	if(length==6){

		if(status == 0){ //验证密码
			url ='pay_password';
		}
		if(status == 1){ //输入新密码
			url ='pay_password_new';
		}
		if(status == 2){ //确认密码
			url ='pay_password_ensure';
		}

		$.ajax({
			type:'post',
			url:'/FrontUserCenter/'+url,
			data:{pwd:pwd},
			success:function (data) {
				if(data.code == 1){
						status = data.status;
						if(status == 1){
							setTimeout(function(){
								var psw = document.getElementById('psw_input');
								psw.value="";
								$('.point').hide();
								$('.forget').hide();
								$('.psw_set').html('请设置支付密码');
							},400);
						}

		 				if(status == 2){
							setTimeout(function(){
								var psw = document.getElementById('psw_input');
								psw.value="";
								$('.point').hide();
								$('.psw_set').html('请确认支付密码');
							},400);
						}

						if(status == 3){
							$('.input_area').hide();
							$('.set_success').show();
						}
				}else{
					$('.Popupdefeat').find('p').html(data.msg);
					$('.Popupdefeat').fadeIn(1500);
					$('.Popupdefeat').fadeOut(1500);
					setTimeout(function(){
						location.reload();
					},3000);
				}
			}
		})

	}
});



</script>
{/literal}
{/block}